<template>
  <div>
    <button @click="toggleModalState()">Open modal</button>
    <teleport to="#modal-wrapper">
      <modal v-if="modalOpen" @close="toggleModalState">
        <p>Hello, I'm a modal window.</p>
      </modal>
    </teleport>
    <div>
      <p>{{"响应式name :"+person.name}}--{{"age: "+age}}--{{" 非响应式name："+name}}</p>
    </div>
    <button @click="changeName">changeName</button>
    <div>
    <h1>count: {{count}}</h1>
    <h1>doubleCount: {{doubleCount}}</h1>
    <button @click="add">add</button>
    <set-up name="刘正星"></set-up>
    </div>
  </div>
</template>

<script>
import Modal from "./Modal.vue";
import Setup from './components/setup.vue'
import { ref, reactive, watchEffect,watch ,computed} from "vue";
export default {
  components: {
    Modal,
    "set-up":Setup
  },
  //setup(), 程序的入口
  setup(props) {
    const age = ref(22); //响应式数据
    const name = "刘正星"; //非响应式
    //复杂响应式数据  类似data 基于proxy 操作数组也会触发响应式
    const person = reactive({
      name: "lzx",
    });
    const changeName = () => {
      person.name = "刘德华";
      name = "刘二狗"
    }
    const modalOpen = ref(false);
    const toggleModalState = () => {
      modalOpen.value = !modalOpen.value;
      console.log(modalOpen.value);
    };
    //监听
    watchEffect(() => {
      console.log(age);
    });
    setInterval(() => {
      age.value++;
    }, 1000);

    const count = ref(0);
    const add = () => {
      count.value++;
    };
    watch(
      () => count.value,
      (val) => {
        console.log(`count is ${val}`);
      }
    );
    const doubleCount = computed(() => count.value * 2);
    // 暴露给模板
    return {
      modalOpen,
      toggleModalState,
      age,
      person,
      changeName,
      name,
      count,
      add,
      doubleCount
    };
  },
  //2.x 写法
  /* data: () => {
        modalOpen: true
    },
    methods: {
        toggleModalState() {
            this.modalOpen = !this.modalOpen;
        }
    }, */
};
</script>
<style >
  div{
    text-align: center;
    font-size: 20px;
  }
</style>


